<template>
  <div class="shopping-cart">
    <div @click="fly('/')">首页</div>
    <div class="cart-title">购物车</div>

    <div class="cart-items">
      <div v-for="item in arr" :key="item.id" class="cart-item">
        <div class="item-image">
          <img :src="require('@/assets/' + item.img)" alt="Product Image" @click="fly1('/detail/?id='+item.bikeId)">
        </div>
        <div class="item-details">
          <div class="item-name">{{ item.pron }}</div>
          <div>￥{{ item.cost * item.count }}元</div>
          <div class="item-quantity">
            <el-input-number v-model="item.count" @change="upd(item.count, item.bikeId)" :min="1" :max="10000"></el-input-number>
            租期为{{ item.count }}{{ item.time }}
          </div>
        </div>
        <div class="item-remove" @click="removeFromCart(item.id)">
          <i class="el-icon-circle-close"></i>
        </div>
      </div>
      <div class="cart-summary">
        <div class="summary-item">
          总计：￥{{ cartTotal }}元
        </div>
        <div @click="fly('/pay/?id=' + Id)" class="checkout-button">
          结算
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Id: JSON.parse(localStorage.getItem('bikeId')),
      count: localStorage.getItem('count'),
      img: localStorage.getItem('img'),
      pron: localStorage.getItem('pron'),
      arr: [],
      temp: {},
      bikeId: this.$route.query.Id,
      tep: null,
      cost: localStorage.getItem('cost'),
      time: localStorage.getItem('time'),
      imgss:localStorage.getItem('bike')
    };
  },
  mounted() {
    this.load();
  },
  computed: {
    cartTotal() {
      return this.arr.reduce((total, item) => {
        return total + (item.cost * item.count);
      }, 0);
    },
  },
  methods: {
    async fly1(url)
    {
      location.href=url
    },
    async load() {
      console.log(111)
      if (localStorage.getItem('fool') != 1) {
        console.log(1)
        let result1 = await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);
        console.log(result1)
        if (result1.status == 200) {
          if (result1.data.data[0] != null && result1.data.data[0].cost == this.cost) {
            console.log("hh1");
          await  this.upd1();

          } else if (result1.data.data[1] != null && result1.data.data[1].cost == this.cost) {
            console.log("111");
            await this.upd2();
          } else if((result1.data.data[0]==null)||(result1.data.data[1]==null&& result1.data.data[0].cost != this.cost)){
            console.log("hhh11");
            await this.ins();
          }
        }
      }
      let result = await this.$axios.get('/itemsell/' + this.Id);
      console.log(result.data.data[2])
      this.arr = result.data.data;
      console.log(this.arr)

    },
    async upd(cur, bikeId) {

      this.bikeId = bikeId;
      let result = await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);
      this.temp = result.data.data;
      this.temp[0].count = cur;
      await this.$axios.post('/itemupd', this.temp[0]);

       await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);

    },
    async upd1() {
      let result = await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);
      this.temp = result.data.data[0];
      this.temp.count = Number(this.temp.count) + Number(this.count);
      this.count = 0;
      await this.$axios.post('/itemupd', this.temp);
      console.log(this.temp)
       result = await this.$axios.get('/itemsell/' + this.Id);
      console.log(result.data.data)
      result = await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);
    },
    async upd2() {
      let result = await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);
      this.temp = result.data.data[1];
      this.temp.count = Number(this.temp.count) + Number(this.count);
      this.count = 0;
      await this.$axios.post('/itemupd', this.temp);
      result = await this.$axios.get('/itemsel/' + this.Id + '/' + this.bikeId);
    },
    async ins() {
      this.temp.pron = this.pron;
      this.temp.img = this.img;
      this.temp.userId = this.Id;
      this.temp.count = this.count;
      this.temp.bikeId = this.bikeId;
      this.temp.cost = this.cost;
      this.temp.time = this.time;
      console.log(this.img)
      console.log("you are egg")
      await this.$axios.post('/itemins', this.temp);
    },
    async removeFromCart(bikeId) {

         await this.$axios.delete('/itemdel/'+bikeId)
      this.updateCart();
    },
    async updateCart() {
      let result = await this.$axios.get('/itemsell/' + this.Id);
      this.arr = result.data.data;
    },
    async fly(url) {

      let result1 = await this.$axios.get('/itemsell/' + this.Id);
      let sum = 0;
      console.log(result1.data.data);
      for (let i = 0; i < result1.data.data.length; i++) {
        sum = Number(sum) + Number(result1.data.data[i].count) * Number(result1.data.data[i].cost);
      }
      this.arr = result1.data.data;
      console.log(sum);
      localStorage.setItem('cart', JSON.stringify(this.arr));
      console.log(this.arr);
      console.log(localStorage.getItem('cart'));
      localStorage.setItem('sum', sum);
      localStorage.setItem('f', '2');
      location.href = url;
    },

  },
};
</script>

<style scoped>
.shopping-cart {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.cart-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
}

.cart-items {
  display: flex;
  flex-direction: column;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fafafa;
}

.item-image img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 4px;
}

.item-details {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.el-input-number {
  margin-right: 10px;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.summary-item {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.checkout-button {
  padding: 10px 20px;
  background-color: #FF6347;
  color: white;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

.checkout-button:hover {
  background-color: #e55a4c;
}

.item-remove {
  cursor: pointer;
  color: #FF6347;
  font-size: 18px;
}
</style>